<template>
	<view class="i-picker" v-if="modelValue">
		<view class="body">
			<view class="title">
				<view @click="close">取消</view>
				<view class="confirm" @click.stop="confirm">确认</view>
			</view>
			<picker-view :style="{height}" :value="selectData" @change="bindChange" class="picker-view"
				indicator-style="height: 34px;">
				<picker-view-column v-for="(item,index) in list" :key="index">
					<view class="item" v-for="i in item" :key="i.value">{{i.label}}</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		defineProps,
		defineEmits,
		watch
	} from 'vue';
	import { getCountDays, showTost } from '../../utils/common';
	const props = defineProps({
		modelValue: {
			type: Boolean,
			default: false
		},
		list: {
			type: Array,
			default: () => []

		} as any,
		height: {
			type: String,
			default: '400rpx'
		},
		type: {
			type: String,
			default: ''
		},
		value: {
			type: Array,
			default: () => []
		} as any,
	})
	const emit = defineEmits(['update:modelValue', 'confirm', 'change'])
	const selectData = ref<any[]>([0])

	const bindChange = (e : {
		detail : {
			value : any[]
		}
	}) => {
		selectData.value = e.detail.value
		emit('change', e.detail.value)
	}
	const close = () => {
		emit('update:modelValue', false)
	}
	const confirm = () => {
		console.log(selectData.value, 'selectData');
		const data = selectData.value.map((item : string | number, index : number) => {
			return {
				label: props.list[index][item].label,
				value: props.list[index][item].value,
			}
		})
		if (props.type === 'timeDate') {
			const date = new Date().getTime()
			const date1 = new Date(`${data[0].label}/${data[1].label}/${data[2]?.label || '1'}`).getTime()
			if (date < date1) {
				showTost('选择时间不能大于当前时间')
				return
			}
		}
		console.log(data, 'datata');
		emit('confirm', data)
		close()
	}

	watch(() => props.value, (val) => {
		if (val.length) {
			selectData.value = []
			val.map((item : { value : string | number }, index : number) => {
				selectData.value[index] = props.list[index].findIndex((i : { value : string | number }) => i.value === item.value)
			})
		} else {
			selectData.value = val
		}
	}, {
		immediate: true,
		deep: true
	})
</script>

<style lang="scss" scoped>
	.i-picker {
		width: 100%;
		height: 100vh;
		position: fixed;
		overflow: hidden;
		z-index: 99;
		background: rgba(0, 0, 0, 0.2);
		@include flexCC;
		justify-content: flex-end;

		.body {
			width: 100%;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0rpx 0rpx;

			.title {
				padding: 24rpx 32rpx;
				@include flexRS;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #f3f4f5;
				@include dfont;

				.confirm {
					@include titlefont(30rpx);
					color: #FB652E;
				}
			}

			.picker-view {
				margin-bottom: 80rpx;

			}

			.item {
				@include dfont;
				text-align: center;
				white-space: nowrap;
				line-height: 34px
			}
		}

	}
</style>